import React, { FC } from "react";

interface IProps {
  name: string;
  mes: string;
}

interface CProps extends IProps {
  children: any[];
}

const Children: FC<IProps> = (props: any) => (
  <div>
    <div>hello, my name is {props.name} </div>
    <div> {props.mes} </div>
  </div>
);

function Container(props: any) {
  const ContainerProps = {
    name: "alien",
    mes: "let us learn react",
  };
  console.log(props.children);
  console.log(props.children[0].props);
  return props.children.map((item: any) => {
    if (React.isValidElement(item)) {
      // 判断是 react elment  混入 props
      return React.cloneElement(
        item,
        { ...ContainerProps },
        (item.props as any).children
      );
    } else if (typeof item === "function") {
      return item(ContainerProps);
    } else return null;
  });
}

const Index = () => {
  return (
    <Container>
      <Children name={""} mes={""} />
      {(ContainerProps: IProps) => (
        <Children {...ContainerProps} name={"haha"} />
      )}
    </Container>
  );
};

export default Index;
